In this article I will discuss how to create a button control in WPF. Further I will discuss how to create a button control which holds Textbox, Image etc. Finally I will discuss how to create a button control dynamically.
<Grid>
<Button x:Name="SampleButton" Width="300" Height="100">Sample Button</Button>
</Grid>
The output is looked like following figure:
In case Button tag I used certain properties such as
- X: Name – Which gives a unique identifier to your button control. This property worked as ID for the button control. We can use this control in code behind file by using SampleButton.
- Width—Width is another property of the button control which determines or set the width of your button control.
- Height—Height is another property of button control which is used to set the height of your button control.
You have seen in this example that “Sample Button” text that is displayed on button control is placed inside the button tag not in the form of any property. This is another feature of WPF Button control. Every WPF control is derived from a base container control. We can use control as a container control also.
Next button control that I am going to show contains an image control. With the help of this example I show you that we can contain another control in Button control.
<Grid>
<Button x:Name="SampleButton" Width="300" Height="100">
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />
</Button>
</Grid>
The output is looked like following figure:
Image – Tag is used to add any image in control. With the help of Source property we tell the path of the image.
Creating Event Handler for Button Control
We can easily create click event handler for button control which is provided by default. Just double click on the button control and event for button is created. When you create any event for button object then some changes are also reflect in xaml file.
Code:
<Grid>
<Button x:Name="SampleButton" Width="300" Height="100" Click="SampleButton_Click">
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />
</Button>
</Grid>
Here we see that a new property named Click is added in Button control which specify named of the event that is raised by Button control.
Code:
private void SampleButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Sample Button is Clicked", "Clicked");
}
When user clicks the button then a message is showed named Sample button is clicked with title Clicked.
Output
Creating button control dynamically through C# code
/// <summary>
/// This event is raised when window is loaded in the memory. At the load
/// event of the window we create a button object and register this object
/// with click event.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Button button = new Button();//Creating the button object
button.Width = 130;//Setting width of the button object
button.Height = 30;//Setting height of the button object
button.Content = "Click Me";//Providing content to the button that is displayed by the object
this.Content = button;// Adding button object to a container
button.Click += btn_click;//Registering button object with click event.
}
/// <summary>
/// This event is raised when ever user click on button control and it display a message Button is clicked
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void btn_click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Button is clicked.", "Clicked Message");
}
Output:
Anonymous User
10-Apr-2019Thanks for sharing.